@charset "utf-8";
@function r($px){
    @return($px/40) * 1rem
}

@keyframes one{
    0%{
        transform: translateX(50vh);
    }
    100%{
        transform: translateX(0);
    }
}
@keyframes two{
    0%{
        transform: translateX(25vh) translateY(1vw);
    }    
    100%{
        transform: translateX(0) translateY(0);
    }
}
@keyframes three{
    0%{
        transform:  scale(0);
    }
    50%{
        transform:  scale(1.5);
    }
    100%{
        transform:  scale(1);
    }
}

*{
    margin: 0;
    padding: 0;
}
#one{
        width: 100%;
        height: 100%;
        background: url(../img/loadBack.jpg) no-repeat;
        background-size: 100% 100%;
        position: absolute;
//      display: none;
        z-index: 6;
        .ones{
            width: r(80);
            height: r(80);
            background: url(../img/pleaseWearEar.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 90vh;
            left: 45vw;
            transition: all 1s;
            transform: scale(3);
            z-index: 6;
        }
        .loading{
            position: absolute;
            top: 90vh;
            left: 3vw;
            font-size: 15px;
            font-weight: bold;
        }
}
#two{
        width: 100%;
        height: 100%;
        background: url(../img/user_bg.png) no-repeat;
        background-size: 100% 100%;
        overflow: hidden;
        position: absolute;
//      display: none;
        z-index: 5;
        .twoa{
            width: r(320);
            height: r(85);
            background: url(../img/KuGouLog.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 1vh;
            left: 64vw;
        }
         .twob{
                width: 100%;
                height: r(440);
                background: url(../img/index_625secguess.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                top: 8vh;
                z-index: 2;
            }
            .twoc{
                width: 100%;
                height: r(560);
                background: url(../img/mouth.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                top: 31vh;
                z-index: 1;
            }
            .twod{
                width: 50%;
                height: r(560);
                background: url(../img/man_left.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                top: 55vh;
                z-index: 2;
            }
            .twoe{
                width: 50%;
                height: r(600);
                background: url(../img/man_right.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                top: 56vh;
                left: 50vw;
                z-index: 2;
            }
            .twof{
                width: 50%;
                height: r(140);
                background: url(../img/index_start.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                top: 89vh;
                left: 25vw;
                z-index: 3;
            }
            .twog{
                width: 40%;
                height: r(440);
                background: url(../img/sixQuery.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                top: 54vh;
                z-index: 3;
            }
            .twoh{
                width: 10%;
                height: r(80);
                background: url(../img/what.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                top: 57vh;
                left: 50vw;
                z-index: 3;
            }
            .twoi{
                width: 10%;
                height: r(80);
                background: url(../img/what.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                top: 56vh;
                left: 88vw;
                z-index: 3;
            }
            .twoj{
                width: 10%;
                height: r(80);
                background: url(../img/what.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                top: 70vh;
                left: 89vw;
                z-index: 3;
            }
            .twok{
                width: 10%;
                height: r(80);
                background: url(../img/what.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                top: 70vh;
                left: 48vw;
                z-index: 3;
            }
}
#bag{
    width: 600%;
    height: 100%;
    display: none;

.three{
        width: 100%;
        height: 100%;
        background: url(../img/bj.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        display: none;
        z-index: 0;
        .threea{
            width: 91%;
            height: r(320); 
            background: url(../img/movieHitSong.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 3vh;
//          left: 64vw;
        }
        .threeb{
            width: 100%;
            height: r(760); 
            background: url(../img/movieHitSongpeople.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
             top: 15vh;
        } 
        .threec{
            width: 100%;
            height: r(420); 
            background: url(../img/movieHitSongCityWall.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
             top: 50vh;
        }
}
.four{
        width: 100%;
        height: 100%;
        background: url(../img/user_bg.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        display: none;
        z-index: 0;
        .foura{
            width: 100%;
            height: r(320); 
            background: url(../img/lightearth.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 0;
        }
        .fourb{
            width: 60%;
            height: r(800); 
            background: url(../img/songer.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 12vh;
            left: 20vw;
            z-index: 5;
        }
        .fourc{
            width: 100%;
            height: r(400); 
            background: url(../img/stage.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 40vh;
            z-index: 3;
        }
        .fourd{
            width: 60%;
            height: r(480); 
            background: url(../img/audienceLeft.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 30vh;
            z-index: 2;
        }
        .foure{
            width: 55%;
            height: r(520); 
            background: url(../img/audienceRight.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 25vh;
            left: 44vw;
            z-index: 2;
        }
        .fourf{
            width: 30%;
            height: r(320); 
            background: url(../img/wow.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 20vh;
            z-index: 2;
        }
        .fourg{
            width: 35%;
            height: r(320); 
            background: url(../img/wow2.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 15vh;
            left: 65vw;
            z-index: 2;
        }
}
.five{
        width: 100%;
        height: 100%;
        background: url(../img/bj.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
//      display: none;
        z-index: 0;
        overflow: hidden;
        .fivea{
            width: 100%;
            height: r(480); 
            background: url(../img/WCwalls.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 37vh;
        }
        .fiveb{
            width: 100%;
            height: r(720); 
            background: url(../img/watchpeos.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 5vh;
            animation: three 2s;
        }
        .fivec{
            width: 60%;
            height: r(800); 
            background: url(../img/jianfeizaode.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 10vh;
            left: 32vw;
            animation: one 1s ;
        }
        .fived{
            width: 33%;
            height: r(120); 
            background: url(../img/feiZhao.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 50vh;
            left: 10vw;
            animation: two 2s ;
        }
}
.six{
        width: 100%;
        height: 100%;
        background: url(../img/bj.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        display: none;
        z-index: 0;
        overflow: hidden;
        .sixa{
            width: 80%;
            height: r(280); 
            background: url(../img/lightearth.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 45vw;
        }
        .sixb{
            width: 35%;
            height: r(280); 
            background: url(../img/juhuaright.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 40vh;
            left: 5vw;
            z-index: 1;
        }
        .sixc{
            width: 40%;
            height: r(400); 
            background: url(../img/juhualeft.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 60vw;
            top: 35vh;
            z-index: 1;
        }
        .sixd{
            width: 85%;
            height: r(920); 
            background: url(../img/oldman.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 5vw;
            top: 10vh;
            z-index: 2;
        }
}
.seven{
        width: 100%;
        height: 100%;
        background: url(../img/manwoman_bg.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        display: none;
        z-index: 0;
        .sevena{
            width: 70%;
            height: r(400); 
            background: url(../img/wogeiyou.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
             top: 5vh;
             left: 5vw;
             z-index: 1;
        }
         .sevenb{
            width: 80%;
            height: r(520); 
            background: url(../img/man.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
             top: 33vh;
             left: 5vw;
             z-index: 3;
        }
         .sevenc{
            width: 50%;
            height: r(800); 
            background: url(../img/wuman.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
             top: 20vh;
             left: 50vw;
             z-index: 2;
        }
}
.eight{
        width: 100%;
        height: 100%;
        background: url(../img/bj.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        display: none;
        z-index: 0;
        .eighta{
            width: 100%;
            height: r(320); 
            background: url(../img/lightearth.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
             z-index: 1;
        }
        .eightb{
            width: 100%;
            height: r(600); 
            background: url(../img/car.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
             top: 30vh;
             z-index: 1;
        }
        .eightc{
            width: 80%;
            height: r(320); 
            background: url(../img/threeYao.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
             top: 12vh;
             left: 5vw;
             z-index: 1;
        }
    }
}

#ABC{
    display: none;
    .nobeA{
            width: 70%;
            height: r(120); 
            background: url(../img/selectA.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
             top: 69vh;
             left: 5vw;
             text-align: center;
             line-height: r(120);
             font-size: 20px;
             font-weight: bold;
        }
        .nobeB{
            width: 70%;
            height: r(120); 
            background: url(../img/selectB.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
             top: 79vh;
             left: 5vw;
             text-align: center;
             line-height: r(120);
             font-size: 20px;
             font-weight: bold;
        }
        .nobeC{
            width: 70%;
            height: r(120); 
            background: url(../img/selectC.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
             top: 89vh;
             left: 5vw;
             text-align: center;
             line-height: r(120);
             font-size: 20px;
             font-weight: bold;
        }
        .dui{
            width: 20%;
            height: r(120); 
            background: url(../img/dui.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
             top: 89vh;
             left: 60vw;
             display: none;
        }
        .cuo{
            width: 20%;
            height: r(120); 
            background: url(../img/cuo.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
             top: 89vh;
             left: 60vw;
             display: none;
        }
        .dui1{
            width: 20%;
            height: r(120); 
            background: url(../img/dui.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
             top: 79vh;
             left: 60vw;
             display: none;
        }
        .cuo1{
            width: 20%;
            height: r(120); 
            background: url(../img/cuo.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
             top: 79vh;
             left: 60vw;
             display: none;
        }
        .dui2{
            width: 20%;
            height: r(120); 
            background: url(../img/dui.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
             top: 69vh;
             left: 60vw;
             display: none;
        }
        .cuo2{
            width: 20%;
            height: r(120); 
            background: url(../img/cuo.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
             top: 69vh;
             left: 60vw;
             display: none;
        }
        .time{
            width: 20%;
            height: r(120); 
            background: url(../img/mouth.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
             top: 79vh;
             left: 77vw;
             text-align: center;
             line-height: r(120);
        }
}
#nice{
    width: 100%;
     height: 100%;
     position: absolute;
     font-size: 30px;
     text-align: center;
     top: 10vh;
     display: none;
     z-index: 10;
     .nicea{
            position: absolute;
            top: 5vh;
            left: 35vw;
     }
    .niceb{
            position: absolute;
            top: 15vh;
            left: 33vw;
     }

}
